<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <title>直播间</title>
    <tc_include file="public:head" />
    <link href="__TMPL__public/assets/js/libs/scroll-bar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="__TMPL__public/assets/css/reset.css">
    <link rel="stylesheet" href="__TMPL__public/assets/css/main.css">
    <link rel="stylesheet" href="__TMPL__public/assets/css/live.css">
    <!--<script src="http://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer.js" charset="utf-8"></script>-->
    <script src="__TMPL__public/assets/sdk/TcPlayer-2.2.0.js"></script>

    <cross-domain-policy>
        <allow-access-from domain="*.qq.com" secure="false"/>
        <allow-access-from domain="qzonestyle.gtimg.cn" secure="false"/>
    </cross-domain-policy>

    <style>
        #play_video{
            position: absolute;
            top: 50%;
            left: 50%;
            -moz-transform: perspective(1px) translate(-50%,-50%);
            -webkit-transform: perspective(1px) translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: perspective(1px) translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div class="center">
    <section id="live-wrap">
        <article class="fl live-left-wrap">
            <div class="live-star-info clearfix">
                <!--<img class="fl host-avatar" src="" alt="">
                <div class="fl">
                    <h4 class="host-name"></h4>
                    <p class="host-popular"></p>
                </div>
                <span class="fr">关注</span>-->
            </div>
            <div class="gift-message-wrap">
                <ul class="live-gift-wrap">
                    <!--<li>
                        <span class="user_leval_mark user_leval_1"></span>
                        <span class="fans-name">贝贝猫</span>
                        <span class="gift-content">送了鲜花</span>
                        &lt;!&ndash;<span class="icon_mul"></span>&ndash;&gt;
                        <span class="gift-flower gift-flower6"></span>
                    </li>-->
                </ul>
            </div>
            <div class="live-prize-wrap">
                <h3 class="title">礼品公示名单</h3>
                <p class="tips">请在消息中心中查看领取方式</p>
                <div class="rewarded-wrap">
                    <div class="rewarded-list-wrap">
                        <!-- <span >棒棒仔66、</span>
                         <span >棒棒仔66、</span>
                         <span >棒棒仔66、</span>
                         <span >棒棒仔66、</span>-->
                    </div>
                </div>

            </div>
        </article>
        <article class="fl live-middle-wrap" style="display: flex;display: flex; flex:1;align-items:center; vertical-align: middle;">
            <div style="width: 100%; height: 100%; min-height: 500px; text-align: center;">
                <span class="fans-num"></span>
                <span class="host-sid"></span>
                <span class="play-btn"></span>
                <!--<span class="live-mark">LiveStar</span>-->
                <div id="play_video" style="position: absolute; display: inline-block;">

                </div>
            </div>
        </article>
        <article class="fl live-right-wrap">
            <div class="comments-wrap">
                <ul id="video_sms_list" class="comments-list-wrap">
                    <!--<li>
                        <div class="inline-bg">
                            <span class="user_leval_mark user_leval_'+msg_test.level+'"></span>
                            <span class="fans-name">'+msg_test.nickName+'</span>
                            <span class="comments_text">'+msg_test.msg+'</span>
                        </div>
                    </li>-->
                </ul>
            </div>

            <!--<ul class="comments-list-wrap">
                <li>
                    <div class="inline-bg">
                        <span class="user_leval_mark user_leval_1"></span>
                        <span class="fans-name">贝贝猫</span>
                        <span class="comments_text">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</span>
                    </div>
                </li>
                <li>
                    <div class="inline-bg-no">
                        <span class="user_leval_mark user_leval_1"></span>
                        <span class="fans-name">贝贝猫</span>
                        <span class="comments_text">进入直播间</span>
                    </div>
                </li>
            </ul>-->
            <div class="comments-box">
                <input class="video-discuss-input" maxlength="30" id="send_msg_text" placeholder="说点儿什么吧" type="text"><span class="fr video-discuss-button" onclick="onSendMsg(1)">发送</span>
            </div>
            <div class="gift-wrap">
                <div class="gift-title clearfix">
                    <span class="fl line-left"></span>
                    <span class=""></span>
                    <span class="fr line-right"></span>
                </div>
                <p class="tips-unit">1L币/朵</p>
                <div class="gift-content">
                    <span class="gift-tips">请选择数量</span>
                    <ul class="gift-list clearfix">
                       <!-- <li class="fl">
                            <span class="gift-flower gift-flower1"></span>
                        </li>
                        <li class="fl">
                            <span class="gift-flower gift-flower2"></span>
                        </li>
                        <li class="fl">
                            <span class="gift-flower gift-flower3"></span>
                        </li>
                        <li class="fl">
                            <span class="gift-flower gift-flower4"></span>
                        </li>
                        <li class="fl">
                            <span class="gift-flower gift-flower5"></span>
                        </li>
                        <li class="fl">
                            <span class="gift-flower gift-flower6"></span>
                        </li>-->
                    </ul>
                    <span class="free-time">免费<i></i></span>
                </div>
            </div>
            <div class="charge-wrap">
                <span class="balance">账户余额：<i class="balance-num"></i>L币</span>
                <a class="charge-add-bg" href="{:url('recharge/index')}"></a>
                <span class="fr gift-send-btn">赠送</span>
            </div>
        </article>

    </section>
    <div class="live-footer">
            <span class="app-code">
                手机看
                <img class="code displayNone" src="__TMPL__public/assets/img/app-code.png" alt="">
            </span>
        <span class="share_font">分享：</span>
            <span class="wx-share">
                <img src="__TMPL__public/assets/img/icon_wx.png" alt="">
            </span>

        <div id="qrcode" class="wx-code-pic displayNone">

        </div>
        <!--<span>分享</span>-->
    </div>
</div>

<div class="video-discuss-form" id="video-discuss-form" style="display: none">
    <!--<input type="text" class="video-discuss-input" id="send_msg_text">-->
    <a href="javascript:void(0);" class="video-discuss-face" onclick="showEmotionDialog()"></a>
    <button class="video-discuss-button" onclick="onSendMsg()">发送</button>
</div>



<include file="public@footer" />
<include file="public@scripts" />
<script src="__TMPL__public/assets/js/libs/scroll-bar/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="__TMPL__public/assets/js/libs/qrcode.min.js"></script>
<script type="text/javascript" src="__TMPL__public/assets/sdk/webim.js?v=1"></script>
<script type="text/javascript" src="__TMPL__public/assets/sdk/json2.js"></script>
<!--webim demo js-->
<script type="text/javascript" src="__TMPL__public/assets/js/im_base.js"></script>
<script type="text/javascript" src="__TMPL__public/assets/js/im_group_notice.js"></script>
<script>
    var roomid = String(iService.getQueryString("roomid"));
    var suid = String(iService.getQueryString("suid"));
    $(function(){

        $(".video-discuss-input").keydown(function(e) {
            if (e.keyCode == 13) {
                onSendMsg(1);
            }
        });
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 120,
            height : 120
        });
        function makeCode () {
            qrcode.makeCode("https://{$_SERVER['HTTP_HOST']}/share/lives/index?channel="+roomid);
        }
        makeCode();

        $(".wx-share").hover(function(){
            $("#qrcode").removeClass("displayNone");
        },function(){
            $("#qrcode").addClass("displayNone");
        });
        var test_t = 0;

        var in_param = {
            url:'Homes/editRoom',
            data:{
                channel:roomid,
                status:1,
                suid:suid
            }
        };
        var play_url = [];
        $.JsonRpc(in_param,function(data){
            if(data.code==400){
                alert(data.data.message);
                window.close();
            }else if(data.code!=200){
                return false;
            }
            play_url = data.data.url;
            $(".free-time i").html(data.data.free);

            var live_info_param = {
                url:'Homes/liveInfo',
                data:{
                    channel:roomid,
                    suid:suid
                }
            };
            $.JsonRpc(live_info_param,function(data){
                data = data.data;
                $(".fans-num").html(data.l_viewing);
                var tpl =
                        '<img class="fl host-avatar" src="'+data.u_avatar+'" alt="">'+
                        '<div class="fl">'+
                        '<h4 class="host-name">'+data.s_name+'</h4>'+
                        '<p class="host-popular">人气值：'+data.u_obtain+'</p>'+
                        '</div>'+iService.focus_status_btn(data.booked,data.s_udid);
                $(".live-star-info").html(tpl);

                $(".host-sid").html("LSID："+data.s_udid);


                $(".live-star-info").on("click",".focus_btn",function(){
                    iService.focus_Fun(this);
                });
                $(".live-star-info").on("mouseover mouseout",".btn_cancel",function(event){
                    if(event.type == "mouseover"){
                        $(this).html("取消关注");
                    }else if(event.type == "mouseout"){
                        $(this).html("已关注");
                    }
                });
                var gift_list_param = {
                    url:'Gifts/giftList',
                    data:{
                        type:10
                    }
                };
                $.JsonRpc(gift_list_param,function(data){
                    $(".balance-num").html(localStorage.u_balance);
                    data = data.data.list;
                    var tpl = "";
                    $.each(data,function(k){
                        tpl+=
                                '<li data-c_id="'+data[k].cid+'" data-c_value="'+data[k].c_value+'" data-c_name="'+data[k].c_name+'" class="fl">'+
                                '<span class="gift-flower gift-flower'+(k+1)+'"></span>'+
                                '</li>'
                    });
                    $(".gift-list").html(tpl);
                    $(".gift-list li").on("click",function(){
                        $(this).addClass("active").siblings("li").removeClass("active");
                    });
                });
            });
        },false);

        /**
         2  ** 减法函数，用来得到精确的减法结果
         3  ** 说明：javascript的减法结果会有误差，在两个浮点数相减的时候会比较明显。这个函数返回较为精确的减法结果。
         4  ** 调用：accSub(arg1,arg2)
         5  ** 返回值：arg1加上arg2的精确结果
         6  **/
        function accSub(arg1, arg2) {
            var r1, r2, m, n;
            try {
                r1 = arg1.toString().split(".")[1].length;
            }
            catch (e) {
                r1 = 0;
            }
            try {
                r2 = arg2.toString().split(".")[1].length;
            }
            catch (e) {
                r2 = 0;
            }
            m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度
            n = (r1 >= r2) ? r1 : r2;
            return ((arg1 * m - arg2 * m) / m).toFixed(n);
        }

        // 给Number类型增加一个mul方法，调用起来更加方便。
       /* Number.prototype.sub = function (arg) {
            return accSub(arg, this);
        };*/

        //用户发送礼物
        var send_gift_btn = $(".gift-send-btn");
        send_gift_btn.on("click",function(){
            var $gift_active = $(".gift-list").find("li.active");
            if($gift_active[0]){
                var cid = $gift_active.data("c_id");
            }else {
                alert("请先选择礼物");
                return false;
            }
            var gift_send_param = {
                url:'Gifts/userSend',
                data:{
                    channel:roomid,
                    suid:suid,
                    cid:cid
                }
            };
            $.JsonRpc(gift_send_param,function(data){
                if(data.code==200){
                    onSendMsg(8,data.data.message+","+$gift_active.index());
                    var balance_num = $(".balance-num");
                    if($gift_active.index()!=0){
                        localStorage.u_balance = data.data.u_balance.replace(/,/g,"");
                        balance_num.html(localStorage.u_balance);
//                        balance_num.html(accSub(balance_num.html(),$gift_active.data("c_value")));
//                        localStorage.u_balance = accSub(balance_num.html(),$gift_active.data("c_value").replace(/,/g,""));
                    }else {
                        $(".free-time i").html(data.data.number);
                        localStorage.u_balance = data.data.u_balance.replace(/,/g,"");
                        balance_num.html(localStorage.u_balance);
                    }
                    $gift_active.removeClass("active");
                }else {
                    alert(data.data.message);
                }
            });
        });

//        "m3u8": play_url[2],

      /*  var live_width = $(".live-middle-wrap").width();
        var live_height = $(".live-middle-wrap").width()*900/520;*/

        function liveSizeInit(){
            var live_width,live_height,live_size;
            var refer_pos = 9/16;
            /*var refer_width = $(".live-middle-wrap").width();
            var refer_height = $(".live-middle-wrap").height();*/

            var refer_width = 500;
            var refer_height = document.documentElement.clientHeight-60;

            if(refer_width/refer_height>refer_pos){
                live_width = refer_width;
                live_height = refer_width*16/9;
            }else {
                live_width = refer_height*9/16;
                live_height = refer_height;
            }
            return live_size ={
                live_width:live_width,
                live_height:live_height
            }
        }
        var live_width = liveSizeInit().live_width;
        var live_height = liveSizeInit().live_height;
        /**
         * [isFullscreenEnabled 判断浏览器是否支持h5全屏api]
         * @return [支持则返回true,不支持返回false]
         */
        function isFullscreenEnabled(){
            return document.fullscreenEnabled       ||
                    document.mozFullScreenEnabled    ||
                    document.webkitFullscreenEnabled ||
                    document.msFullscreenEnabled || false;
        }
        function isFullscreen(){
            var explorer = window.navigator.userAgent.toLowerCase();
            if(explorer.indexOf('chrome')>0){
                //chrome
                if (document.body.scrollHeight == window.screen.height && document.body.scrollWidth == window.screen.width) {
                    return true;
                } else {
                    return false;
                }
            }else{
                //IE 9+  fireFox
                if (window.outerHeight == screen.height && window.outerWidth == screen.width) {
                    return true;
                } else {
                    return false;
                }
            }
        }


        $(window).resize(function() {
            var live_size = liveSizeInit();
            var live_nw = live_size.live_width;
            var live_nh = live_size.live_height;
            //将会覆盖原有所有行间样式
            $(".vcp-player").attr("style",'width:'+live_nw+"px!important;"+'height:'+live_nh+"px!important;");
            $("video").attr("style",'width:'+live_nw+"px!important;"+'height:'+live_nh+"px!important;");

            if(isFullscreen()){
                $(".vcp-player").attr("style",'width:'+screen.width+"px!important;"+'height:'+screen.width*16/9+"px!important;");
                $("video").attr("style",'width:'+screen.width+"px!important;"+'height:'+screen.width*16/9+"px!important;");
            }
        });

        var player =  new TcPlayer('play_video', {
//            rtmp: play_url[0],
            "m3u8": play_url[2],
            "flv":  play_url[1], //增加了一个flv的播放地址，用于PC平台的播放
            "autoplay" : false,      //iOS下safari浏览器是不开放这个能力的
            "flash":false,
            "coverpic" : {"style": "cover", "src": "__TMPL__public/assets/images/logo.png"},
            "width" :  live_width,//视频的显示宽度，请尽量使用视频分辨率宽度
            "height" : live_height, //视频的显示高度，请尽量使用视频分辨率高度
            "controls":"none",
            "live": true,
            wording: {
                2032: '请求视频失败，请检查网络',
                2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
            },
            listener: function (msg) {
                console.log(msg.type);
                var play_btn = $(".play-btn");
                function showPlayBtn (){
                    if(player.playing()){
                        play_btn.hide();
                    }else {
                        play_btn.show();
                    }
                }
                showPlayBtn();
                play_btn.on("click",function(){
                    player.play();
                    showPlayBtn();
                });
                if(msg.type=="load"){
                    var liveMidWrap = $(".live-middle-wrap");
                    liveMidWrap.off("dblclick").on("dblclick",function(){
                        if(!player.playing()){
                            return false;
                        }
                        player.fullscreen(true);
                        $(".live-middle-wrap").addClass("cancel-full");
                        $("#live-wrap .cancel-full").on("dblclick",function(){
                            player.fullscreen(false);
                            $(".live-middle-wrap").removeClass("cancel-full");
                        });
                    });
                }
            }
        });
    });


    var scroll_Init = function(){
        var content=$(".comments-wrap"),autoScrollTimer=500,autoScrollTimerAdjust,gift_content = $(".gift-message-wrap"),rewarded_content = $(".rewarded-wrap");
        content.mCustomScrollbar({
            scrollButtons:{enable:false},
            callbacks:{
                whileScrolling:function(){
//                    autoScrollTimerAdjust=autoScrollTimer*this.mcs.topPct/100;
                },
                onScroll:function(){
                }
            }
        });
        gift_content.mCustomScrollbar({
            scrollButtons:{enable:false}
        });
        rewarded_content.mCustomScrollbar({
            scrollButtons:{enable:false}
        });
    };
    scroll_Init();
    var scrollAuto = function(now_wrap){
        $(now_wrap).mCustomScrollbar("scrollTo","bottom",{scrollInertia:500,scrollEasing:"easeInOutSmooth"});
    };
    scrollAuto();

    //官方 demo appid,需要开发者自己修改（托管模式）
    var sdkAppID = 1400023198;
    var accountType = 10056;

    var avChatRoomId = roomid; //默认房间群ID，群类型必须是直播聊天室（AVChatRoom）

    if (webim.Tool.getQueryString("roomid")) {
        avChatRoomId = webim.Tool.getQueryString("roomid");//用户自定义房间群id
    }
    var selType = webim.SESSION_TYPE.GROUP;
    var selToID = avChatRoomId;//当前选中聊天id（当聊天类型为私聊时，该值为好友帐号，否则为群号）
    var selSess = null;//当前聊天会话

    //默认群组头像(选填)

    //    var headurl = "/themes//Public/assets/images/logo.png";
    var identifier = localStorage.udid,
            headurl = localStorage.u_avatar,
            identifierNick = localStorage.u_nickname,
            userSig = localStorage.tim;

    //当前用户身份
    var loginInfo = {
        'sdkAppID': sdkAppID, //用户所属应用id,必填
        'appIDAt3rd': sdkAppID, //用户所属应用id，必填
        'accountType': accountType, //用户所属应用帐号类型，必填
        'identifier': identifier, //当前用户ID,必须是否字符串类型，选填
        'identifierNick': identifierNick, //当前用户昵称，选填
        'userSig': userSig, //当前用户身份凭证，必须是字符串类型，选填
        'headurl': headurl //当前用户默认头像，选填
    };
    console.log(loginInfo);
    //监听（多终端同步）群系统消息方法，方法都定义在demo_group_notice.js文件中
    //注意每个数字代表的含义，比如，
    //1表示监听申请加群消息，2表示监听申请加群被同意消息，3表示监听申请加群被拒绝消息等
    var onGroupSystemNotifys = {
        //"1": onApplyJoinGroupRequestNotify, //申请加群请求（只有管理员会收到,暂不支持）
        //"2": onApplyJoinGroupAcceptNotify, //申请加群被同意（只有申请人能够收到,暂不支持）
        //"3": onApplyJoinGroupRefuseNotify, //申请加群被拒绝（只有申请人能够收到,暂不支持）
        //"4": onKickedGroupNotify, //被管理员踢出群(只有被踢者接收到,暂不支持)
        "5": onDestoryGroupNotify, //群被解散(全员接收)
        //"6": onCreateGroupNotify, //创建群(创建者接收,暂不支持)
        //"7": onInvitedJoinGroupNotify, //邀请加群(被邀请者接收,暂不支持)
        //"8": onQuitGroupNotify, //主动退群(主动退出者接收,暂不支持)
        //"9": onSetedGroupAdminNotify, //设置管理员(被设置者接收,暂不支持)
        //"10": onCanceledGroupAdminNotify, //取消管理员(被取消者接收,暂不支持)
        "11": onRevokeGroupNotify, //群已被回收(全员接收)
        "255": onCustomGroupNotify//用户自定义通知(默认全员接收)
    };
    //监听连接状态回调变化事件
    var onConnNotify = function (resp) {
        switch (resp.ErrorCode) {
            case webim.CONNECTION_STATUS.ON:
                //webim.Log.warn('连接状态正常...');
                break;
            case webim.CONNECTION_STATUS.OFF:
                webim.Log.warn('连接已断开，无法收到新消息，请检查下你的网络是否正常');
                break;
            default:
                webim.Log.error('未知连接状态,status=' + resp.ErrorCode);
                break;
        }
    };

    //监听事件
    var listeners = {
        "onConnNotify": onConnNotify, //选填
        "jsonpCallback": jsonpCallback, //IE9(含)以下浏览器用到的jsonp回调函数,移动端可不填，pc端必填
        "onBigGroupMsgNotify": onBigGroupMsgNotify, //监听新消息(大群)事件，必填
        "onMsgNotify": onMsgNotify,//监听新消息(私聊(包括普通消息和全员推送消息)，普通群(非直播聊天室)消息)事件，必填
        "onGroupSystemNotifys": onGroupSystemNotifys, //监听（多终端同步）群系统消息事件，必填
        "onGroupInfoChangeNotify": onGroupInfoChangeNotify//监听群资料变化事件，选填
    };

    var isAccessFormalEnv = true;//是否访问正式环境

    if (webim.Tool.getQueryString("isAccessFormalEnv") == "false") {
        isAccessFormalEnv = false;//访问测试环境
    }

    var isLogOn = false;//是否在浏览器控制台打印sdk日志

    //其他对象，选填
    var options = {
        'isAccessFormalEnv': isAccessFormalEnv,//是否访问正式环境，默认访问正式，选填
        'isLogOn': isLogOn//是否开启控制台打印日志,默认开启，选填
    };

    var curPlayAudio = null;//当前正在播放的audio对象

    var openEmotionFlag = false;//是否打开过表情
    sdkLogin();
    if(/debug/gi.test(location.hash)){
        document.write('<script src="http://sdklog.isd.com/js/vconsole.min.js"></scr'+'ipt>');
    }
</script>
</body>
</html>